<template>
  <div class="userinfo-box">
    <div class="info-item" style="height: 120px">
      <span>头像</span>
      <van-image
          width="70"
          height="70"
          src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
      />
    </div>
    <div class="info-item">
      <span>姓名</span>
      <span>{{infoRes.username}}</span>
    </div>
    <div class="info-item">
      <span>性别</span>
      <span>{{infoRes.gender}}</span>
    </div>
    <div class="info-item">
      <span>电话</span>
      <span>{{infoRes.tel}}</span>
    </div>
    <div class="info-item">
      <span>地区</span>
      <span>{{infoRes.addr}}</span>
    </div>
    <div class="info-item">
      <span>注册时间</span>
      <span>{{infoRes.date}}</span>
    </div>
  </div>
</template>

<script setup>
import {reactive} from "vue"

const infoRes = reactive({
  username : '张三',
  tel : '13500008888',
  addr : '辽宁省',
  gender:'男',
  date:'2024-1-15',
})
</script>

<style scoped lang="less">
.userinfo-box{
  height: auto;
  width: 95%;
  margin: 30px auto;
  border: 1px solid lightgray;
  box-shadow: 0 0 15px lightgray;
  border-radius: 15px;
  background-color: #fff;
  padding-bottom: 20px;
  .info-item{
    box-sizing: border-box;
    height: 100px;
    width: 95%;
    margin: 0 auto;
    border-bottom: .5px solid lightgray;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 25px;
  }
}
</style>